Dress Up Your Website With Cool CSS Tricks
by Merle


In Part 1 of this series, we discussed the different ways of 
implementing style sheets into your site and the basic layout 
of tags. Now, let's move on to some of the fun ways you can 
dress up your site with some standard CSS tags.

Have you ever been to a website and saw text that appeared to 
have been highlighted with a yellow highlighter pen? Many 
sales-oriented sites use this technique to call attention to 
ad copy they want to stand out.

The tag looks like this:

<span style= "background-color:yellow"> Text Here </span>

Pretty simple, really. How about sites that remove the
underlining from hyperlinks? Think it can't be done? Think 
again. Here's how to do it:

<style type="text/css">
<!--
A:link {text-decoration:none}
A:visited {text-decoration:none}
-->
</style>

or like this -

A:link, A:visited, A:active { text-decoration: none }

How about setting your link colors? And how about making the 
links change colors when you hover over them? This is easy, too, 
but be aware it only works in Internet Explorer 5.0 or higher.

<style type="text/css">
<!--
A:link { color: #0000FF }
A:visited { color: #000000}
A:hover { color: #FFCC33 }
-->
</style>

Many sites you go to these days have fancy colored scroll bars 
instead of boring gray ones. This code only works in Internet 
Explorer 5.5 or higher; Netscape users will still see the 
standard gray.

<STYLE TYPE="text/css">
<!--
body {scrollbar-3dlight-color:#ff9909; 
scrollbar-arrow-color:#000099;
scrollbar-base-color:#ff9909;
scrollbar-darkshadow-color:#000099;
scrollbar-face-color:#ff9909;
scrollbar-highlight-color:#000099;
scrollbar-shadow-color:#ff9909}
-->
</STYLE>


If you'd like some free software that will generate the colored 
scroll bar tags easily, go to http://harmonyhollow.net/cws.shtml
You'll also find an online tool you can use to generate the code 
at:

http://www.draac.com/mouseover-scrollbars.html

Page Margins are easy to control with CSS and can be set in 
mm, cm, in, points (pt) or pixels (px).

Example: To set a left margin
margin-left: 2.0 in;

To set all 4 margins at once use:
Body {margin: 2 in }

To set individual margins at once use:
Body {margin: 2% 5% 10% 12% }

Did you know some sites even use CSS to lay out their
tables? This is a pretty advanced topic and not for the
faint of heart:

http://developer.apple.com/internet/css/introcsslayout.html

Want to keep a background image from tiling on your pages?

Body {background: #333399 url (filename.gif) no-repeat center}

Think indenting paragraphs online is impossible?

P { text-indent: .50in }

Tables don't have to be boring. You can give em fancy
borders by inserting this instruction into your table tag:

Style= "border: 4px solid red"

You can change the above color and px size to whatever you like.

Ever notice how almost all submit buttons are all dull gray? 
Yours doesn't have to be. Use the following tag between the 
<form> tags.

<form>
<input type= "submit" value="submit" style="background-color:#333399">
</form>

For more information on dressing up your forms with CSS see
these tutorials:

http://outfront.net/tutorials_02/adv_tech/funkyforms1.htm

These are just a few of the page elements you can control with 
CSS. For more tricks and tips, visit some of these sites:

http://www.boogiejack.com/css_tutorials.html
http://www.w3.org/Style/Examples/007/
http://www.mako4css.com/Tutorial.htm
http://www.videoproductions.com.au/px/css_tips.html

Using CSS to dress up your site is really pretty simple. Just a 
few tags can have you looking like an instant Webmaster Genius. 
Try some today and your friends will be dying to know your 
secrets. Whether you share or not is up to you.

================================================================
Merle http://www.EzineAdAuction.com "Where some of the BEST Deals 
in Ezine Advertising are Made". Buy & Sell Ezine Ads in a live 
auction setting! Publishers sell off your excess inventory and 
Buyers pick up some Fantastic bargains. Free E-book on how to
write "glowing" ezine ads.....Download Now at:
http://www.ezineadauction.com/ebooks/greatezineads.pdf 
================================================================